<template>
    <div class="recharge">
        <div class="container">
            <section class="pnel">
                <label for="" class="labname">
                    <span>当前余额</span>
                    <strong>{{balance}}彩豆</strong>
                </label>
            </section>
            <section class="pnel rechargelist">
                <h6>充值金额</h6>
                <dl>
                    <dd :class="[selectedIndex===index?'active':'']" v-for="(item,index) in rechargelist"
                        @click="selectedIndex=index" :key="index">
                        <span>{{item}}元</span>
                        <strong>{{item}}彩豆</strong>
                    </dd>
                    <dd @click="selectedIndex=5" :class="[selectedIndex===5?'active':'']">
                        <input type="tel" placeholder="自定义金额" v-model="money">
                    </dd>
                </dl>
            </section>
            <Payselect ref="payselectnode"/>
        </div>

        <myButton text="充值" :clickfn="submitfn"/>
    </div>
</template>

<script>
    import Button from '../../components/Button.vue';
    import DomLoad from '../../components/DomLoad';
    import Payselect from '../../components/Payselect.vue';
    import {payRechargeR} from '../../service/security';
    import {isiOS, delay} from '../../uitls/common';
    import {getMytoken} from '../../service/common';
    import {getMyInfoR} from '../../service/my';
    import store from 'store2';
    import {paytypefn} from '../../uitls/securitypay';
    export default {
        components: {
            myButton: Button,
            DomLoad,
            Payselect
        },
        data() {
            return {
                rechargelist: [30, 60, 88, 188, 388],
                selectedIndex: 0,
                money: '',
                balance: 0
            };
        },
        created() {
            this.getinfo()
        },
        computed: {},
        methods: {
            /**
             * 获取一些初始化信息
             */
            async getPinfo(token){
                const {data}=await getMyInfoR(token);
                if(data && data.code === 0) {
                    this.balance = data.data.balance;
                }
            },
            async getinfo(index){
                const {token, balance, Mobile}=await getMytoken();
                if(!token) {
                    this.$vux.toast.text('请登录');
                    return;
                }
                await this.getPinfo(token);
            },
            async submitfn(){
                const {token} = await getMytoken();
                const {ID, Code}= this.$refs.payselectnode.getSelectedType();
                const Money = this.selectedIndex === 5 ? this.money : this.rechargelist[this.selectedIndex];
                if(parseFloat(Money) <= 0) {
                    this.$vux.toast.text('金额不正确');
                    return;
                }
                const SchemeID = 0;
                const senddata = {};
                const params = {
                    UserIDGuid: token,
                    PayTypeCode: ID,
                    Code: Code,
                    Money,
                    SchemeID: 0,
                    ReturnUrl: encodeURIComponent(`${location.origin}/#/security/payresult`),
                    IsAndroid: !isiOS() ? 1 : 0
                };
                const {data} = await payRechargeR(params);
                if(data && data.code === 0) {
                    store('payinfoDate', {PayNumber: data.msg, SchemeID});//存本地
                    const dd = await paytypefn({Code, data, senddata});
                    if(dd === 'success') {
                        this.$vux.toast.text('充值成功');
                        await delay(1000);
                        this.$router.push('/my/details/');
                    }
                }
                else {
                    this.$vux.toast.text(data.msg);
                }

            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .recharge {
        display: flex;
        height: 100%;
        flex-direction: column;
        .container {
            flex: 1;
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
        }
    }

    .labname {
        height: 120px;
        display: flex;
        align-items: center;
        padding: 0 20px 0 33px;
        span {
            flex: 1;
            font-size: @fz32;
        }
        strong {
            font-size: @fz30;
            color: @colororange;
        }
    }

    .pnel {
        margin-bottom: 20px;
        background: #fff;
        color: #333;
    }

    .rechargelist {
        padding-left: 30px;
        overflow: hidden;
        h6 {
            height: 86px;
            font-size: @fz30;
            display: block;
            line-height: 120px;
            margin-bottom: 20px;
        }
        dl {
            display: flex;
            flex-wrap: wrap;
            width: 800px;
            dd {
                width: 202px;
                height: 108px;
                border-radius: 6px;
                border: 1px solid @colororange;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                margin: 0 40px 40px 0;
                position: relative;
                &.active {
                    &:after {
                        content: ' ';
                        width: 40px;
                        height: 40px;
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        background: url(//common-1253410441.file.myqcloud.com/activityimg/20171211174631.png) no-repeat left bottom;
                        background-size: contain;
                    }
                }
                span {
                    font-weight: bold;
                    font-size: @fz32;
                    color: @colororange;
                }
                strong {
                    font-size: @fz26;
                    color: @color3;
                }
                input {
                    height: 100%;
                    width: 100%;
                    font-size: @fz32;
                    text-align: center;
                }
            }
        }

    }
</style>